<template>
	<div>
		<!-- 查询表单区域 -->
		<!-- 搜索框 -->
		<el-card class="box-card card-toubu" shadow="never">
		  <div class="text item">
		    <i class="el-icon-search"></i>&nbsp;
		    <span>筛选搜索</span>
		    <br />
		    <br />
			<el-form :inline="true" :model="querySpu" class="demo-form-inline">
			  <el-form-item label="商品名称">
				<el-input
				  v-model="querySpu.name"
				  placeholder="请输入商品名称"
				></el-input>
			  </el-form-item>
			  <el-form-item label="商品分类">
				<el-cascader
				  clearable
				  v-model="value"
				  :options="categories"
				  @change="handleChange(value)"
				></el-cascader>
			  </el-form-item>
			  <el-form-item label="商品品牌">
				<el-select
				  v-model="querySpu.brandId"
				  placeholder="请选择商品品牌"
				  clearable
				>
				  <el-option
					v-for="item in brands"
					:key="item.id"
					:label="item.name"
					:value="item.id"
				  >
				  </el-option>
				</el-select>
			  </el-form-item>
			  <el-form-item>
				<el-button type="primary" @click="onSubmit">查询</el-button>
			  </el-form-item>
			</el-form>
		  </div>
		</el-card>
		<el-card class="box-card card-toubu" shadow="never">
		  <div class="text item">
		    <i class="el-icon-tickets"></i>&nbsp;
		    <span>数据列表</span>
		  </div>
		</el-card>
		<!-- 表格区域 -->
		<el-table :data="tableData" style="width: 100%" border>
		  <el-table-column label="编号" prop="id"></el-table-column>
		  <el-table-column label="商品图片" width="200">
		    <template slot-scope="scope">
		      <img :src="scope.row.image" width="150px" height="150px" />
		    </template>
		  </el-table-column>
		  <el-table-column label="商品名称">
		    <template slot-scope="scope">
		      <span v-for="(a,b) in scope.row.name.split(' ')" :key="a">
		        <p v-if="b == 0">
		          {{a}}
		        </p>
		      </span>
		      <span>品牌: {{ scope.row.brandName }}</span>
		    </template>
		  </el-table-column>
		  <el-table-column label="商品分类">
		    <template slot-scope="scope"> {{ scope.row.categoryName }} </template>
		  </el-table-column>
		  <el-table-column label="价格">
		    <template slot-scope="scope"> {{ scope.row.price / 100 }} </template>
		  </el-table-column>
		  <el-table-column label="货号">
		    <template slot-scope="scope"> 货号：{{ scope.row.psn }} </template>
		  </el-table-column>
		  <el-table-column label="操作" align="right">
		    <template slot-scope="scope">
		      <el-button size="mini" @click="reduction(scope.row.spuId)">还原</el-button>
		      <el-button size="mini" @click="deleteSpu(scope.row.spuId)">删除</el-button>
		    </template>
		  </el-table-column>
		</el-table>
		<!-- 分页控件 -->
		<el-pagination
		  @size-change="handleSizeChange"
		  @current-change="handleCurrentChange"
		  :current-page="currentPage"
		  :page-sizes="pageSizes"
		  :page-size="pageSize"
		  layout="total, sizes, prev, pager, next, jumper"
		  :total="total"
		>
		</el-pagination>
	</div>
</template>

<script>
export default {
	data () {
		return {
			// 数据接收数组
			tableData: [],
			// 总行数
			total: 0,
			// 选择显示每页多少数据数组
			pageSizes: [10, 20, 30, 40],
			// 页号
			currentPage: 1,
			// 页大小
			pageSize: 10,
			// 品牌名称
			brandName: "",
			// 查询条件
			querySpu: {},
			// 商品品牌
			brands: [],
			// 商品分类
			categories: [],
			// 商品分类数组值
			value: [],
			// 对话框
			dialogFormVisible: false,
			// 审核对象
			auditSpu: {
				name: '',
				status: ''
			}
		}
	},
	methods: {
	  // 初始化数据方法
	  async getSpu() {
		const { data: res } = await this.$http.post(
		  `vi/goods/spu/selectSpuAndSkuDelete/${this.currentPage}/${this.pageSize}`,
		  this.querySpu
		);
		this.tableData = res.data.pageUtils.rows;
		this.total = res.data.pageUtils.total;
	  },
	  // 页大小改变方法
	  handleSizeChange(val) {
		this.pageSize = val;
		this.getSpu();
	  },
	  // 页号改变方法
	  handleCurrentChange(val) {
		this.currentPage = val;
		this.getSpu();
	  },
	  // 初始化商品品牌列表
	  async getBrand() {
		const { data: res } = await this.$http.get("vi/goods/brand/list");
		this.brands = res.data.list;
	  },
	  // 初始化商品分类
	  async getCategory() {
		const { data: res } = await this.$http.get(
		  "vi/goods/category/queryAllCategory"
		);
		this.categories = res.data.maps;
	  },
	  // 条件查询提交
	  onSubmit() {
		this.getSpu();
	  },
	  // 还原商品
	  async reduction (id) {
		  const { data: res } = await this.$http.get(`vi/goods/spu/recycledGoods/${id}`)
		  this.$message.success(res.message)
		  this.getSpu()
	  },
	  // 删除商品
	  async deleteSpu (id) {
		  console.log(1111)
		  this.$confirm("此操作将永久删除该记录, 是否继续?", "提示", {
		    confirmButtonText: "确定",
		    cancelButtonText: "取消",
		    type: "warning"
		  })
		    .then(async () => {
			  const { data: res } = await this.$http.delete(`vi/goods/spu/delete/${id}`)
			  console.log(res)
		      if (res.code === 20001) {
		        this.$message.error(res.message);
		      } else {
		        this.$message.success(res.message);
		        this.getSpu();
		      }
		      // 刷新页面
		    })
		    .catch(() => {
		      this.$message.info("已取消删除");
		    });
	  }
	},
	created() {
	  this.getSpu();
	  this.getBrand();
	  this.getCategory();
	}
}
</script>

<style>
</style>
